<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:52:26
 * @LastEditTime: 2023-05-08 17:28:40
-->
<template>
    <div class="popover-box" v-if="props.isShow">
      <div :class="['popover-content', 'dialog-inner', props.isShow && 'scale-in-center']">
        <div style="margin-bottom: 20px;" class="uni-img" @click="handleSelect(1)">
            <img :src="assetsImageUrl + '/images/uni-v.png'" alt="">
            <div class="btn">选 择</div>
        </div>
        <div class="uni-img" @click="handleSelect(2)">
            <img :src="assetsImageUrl + '/images/uni-k.png'" alt="">
            <div class="btn">选 择</div>
        </div>
      </div>
  
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
import { userCarType } from '../api';
  const emit = defineEmits(['handleClose'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '恭喜您'
    },
    icon: {
      type: String
    },
    tips: {
      type: Boolean,
    }
  })
  const assetsImageUrl = ref(import.meta.env.VITE_ASSETS_IMAGE_URL)
  function handleSelect(car_type) {
    userCarType({car_type}).then(() => {
        emit('handleClose')
    })
  }
  </script>
  <style  scoped>
  .popover-box {
    position: fixed;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "ChangAnunitype-Bold";
    top: 0;
  
  }
  .popover-box .uni-img {
    position: relative;
  }
  .popover-content {
    width: 606px;
    min-height: 397px;
    padding: 40px 100px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    border-radius: 30px;
    text-align: center;
  }
  
  .icon {
    display: flex;
    justify-content: center;
    padding: 10px 0 15px 0;
  }
  
  .icon > img {
    max-width: 50%;
  }
  
  .tips {
    color: #999;
    font-size: 20px;
    font-family: "ChangAnunitype-Regular";
  }
  
  .popover-bg {
    width: 100%;
    height: 100%;
  }
  
  .bell_bg {
    position: absolute;
    width: 119px;
    height: 118px;
    top: -60px;
  }
  
  .bell {
    position: absolute;
    width: 61px;
    height: 62px;
    top: -30px;
  
  }
  
  .popover-data {
    font-family: "ChangAnunitype-Regular";
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0160a5;
    letter-spacing: 2px;
    font-weight: 900;
    margin-top: 20px;
  }
  
   .btn {
    position: absolute;
    right: 0;
    bottom: -2.8vw;
    background: linear-gradient(180deg, #91d8ff, #4e81e9);
    border-radius: 50px;
    width: 150px;
    height: 8.8vw;
    line-height: 8.8vw;
    font-size: 4.8vw;
    letter-spacing: 0.53333vw;
    color: rgb(208, 57, 28);
    font-family: "ChangAnunitype-Bold";
    background: url(#{$base_path}/images/home/btn_bg.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
  }
  </style>